<!-- <template>
  <el-drawer
      size="30%"
      v-model="drawer"
      direction="rtl"
      :before-close="closeDrawer">
          <el-form
          size="small"
          ref="formRef"
          style="max-width: 600px"
          :model="formData"
          status-icon
          :rules="rules"
          label-width="60px"
      >

  
  <el-form-item label="用户昵称" prop="userNickname">
      <el-input v-model="formData.roomType" style="width: 300px;" />
  </el-form-item>
  <el-form-item label="用户姓名" prop="userName">
      <el-input v-model="formData.price" style="width: 300px;" />
  </el-form-item>
  <el-form-item label="用户性别" prop="userSex">
      <el-input v-model="formData.peopleNum" style="width: 300px;" />
  </el-form-item>
  <el-form-item label="手机号码" prop="phone">
      <el-input v-model="formData.roomNum" style="width: 300px;" />
  </el-form-item>

 <el-form-item label="用户头像" prop="userHead">
    <el-upload
      class="upload-demo"
      drag
      action="your-upload-endpoint"
      :on-success="handleUploadSuccess"
      :on-remove="handleRemove"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="true"
      :limit="5"
      :show-file-list="true"
    >
    </el-upload>
  </el-form-item>
  
  <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">{{formData.id?'修改':'添加' }}</el-button>
      <el-button @click="resetForm(formRef)">取消</el-button>
  </el-form-item>
  
  </el-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref,reactive } from "vue";


const emit = defineEmits(['sync-list'])

//抽屉变量
const drawer = ref(false)
//关闭抽屉
const closeDrawer = () =>{
  drawer.value =false
  //重置表单
  formRef.value?.resetFields()
  //清空表单
  formData.value = {
    roleName:'',
  }
}

const formRef = ref<FormInstance>()

//表单数据
const formData = ref({
  userNickname:'',
  userName:'',
  userSex:'',
  phone:'',
  userHead:'',
})

//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
 //清空表单
  formData.value = {
    roleName:'',
  }
}

//暴露成员
defineExpose({
  drawer,
  formData
})

</script>

<style lang="scss" scoped>

</style> -->